<template>
  <div class="land-scape-lamp">
    <div class="search-wrap">
      <el-form :inline="true" :model="params">
        <el-form-item label="楼宇选择">
          <el-select
            class="sel-width"
            v-model="value"
            placeholder="请选择"
            clearbaler
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            class="two-sel-width"
            v-model="value"
            placeholder="请选择"
            clearbaler
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="照明状态">
          <el-select
            class="sel-width"
            v-model="value"
            placeholder="请选择"
            clearbaler
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <div class="btn-wrap">
            <el-button :icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
          </div></el-form-item
        >
      </el-form>
    </div>
    <div class="table-data">
      <el-table class="table-height" :data="tableData">
        <!-- <el-table-column type="selection" align="center"> </el-table-column> -->
        <el-table-column
          v-for="item in tableItem"
          :prop="item.prop"
          :label="item.label"
          align="center"
        >
          <template #default="{ row }" v-if="item.label === '照明状态'">
            <div class="air-status">
              <!-- 
                #06FF34 运行中
                #FFC922 报警
                #FF2222 故障
                #FFFFFF  离线
              -->
              <div class="circle"></div>
              <span>运行中</span>
            </div>
          </template>
          <template #default="{ row }" v-if="item.label == '开关'">
            <div class="switch">
              <el-switch v-model="params.value2" />
            </div>
          </template>
          <template #default="{ row }" v-if="item.label === '操作'">
            <div class="btn-wrap">
              <button class="distribute" @click="handleNodeClick(row)">
                派发
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        v-model:currentPage="params.currentPage"
        :total="total"
        layout="total,prev, pager, next, jumper"
        v-model:page-size="params.pageSize"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
let params = reactive({});
let value1 = ref("");
let total = ref(1);
let tableItem = ref([
  {
    prop: "date",
    label: "设备编号",
  },
  {
    prop: "date",
    label: "照明状态",
  },
  {
    prop: "date",
    label: "开关",
  },
  {
    prop: "date",
    label: "设备名称",
  },

  {
    prop: "date",
    label: "照明类型",
  },
  {
    prop: "date",
    label: "照明亮度",
  },
  {
    prop: "date",
    label: "照明功率",
  },

  {
    prop: "date",
    label: "已运行时间(h)",
  },
]);

const tableData = [
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },

  {
    date: "基波电压(V)",

    name: "基波电流",
  },
];
</script>
<style lang="scss" scoped>
.land-scape-lamp {
  width: 100%;
  height: 100%;
  margin-top: 21px;
  height: calc(100vh - 21px - 50px - 20px);
  background-color: #022655;
  padding-top: 15px;
  .search-wrap {
    padding-left: 32px;
    padding-top: 8px;

    span {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
    }
    .ipt-witdh {
      width: 240px;
    }
    .two-sel-width {
      width: 200px;
      margin-left: 12px;
    }
    .sel-width {
      width: 260px;
    }
    .del-btn {
      display: flex;
      align-items: center;
      width: 81px;
      height: 35px;
      background: rgba(133, 18, 20, 0.4);
      border: 1px solid #ff2222;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fefefe;
      padding-left: 11px;
      margin-left: 17px;
      img {
        width: 15px;
        height: 17px;
        margin-right: 7px;
      }
    }
    .btn-wrap {
      display: flex;
      align-items: center;
    }

    :deep(.el-col.el-col-1.is-guttered) {
      padding-left: 0px !important;
    }
    :deep(.el-date-editor) {
      width: 300px !important;
    }

    :deep(.el-form-item) {
      margin-bottom: 0px;
    }
    :deep(.el-button) {
      width: 84px;
      height: 35px;
      background: rgba(27, 168, 255, 0.35);
      border: 1px solid #61c8ff;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fefefe;
      border-radius: 0px;

      svg {
        width: 50px !important;
        height: 17px !important;
      }
    }
  }
  .table-data {
    margin-top: 25px;
    width: 1620px;
    padding-left: 22px;
    padding-right: 22px;
    .btn-wrap {
      display: flex;
      justify-content: center;
    }

    .distribute {
      width: 73px;
      height: 31px;
      background: rgba(97, 200, 255, 0.28);
      border: 1px solid #61c8ff;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      cursor: pointer;
    }
    .table-height {
      height: 538px;
      width: 1590px;
      .switch {
      }
      .air-status {
        display: flex;
        align-items: center;
        justify-content: center;
        .circle {
          width: 17px;
          height: 17px;
          border-radius: 50%;
          border: 3px solid #ffc922;
          margin-right: 7px;
        }
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #fefefe;
        }
      }
    }

    :deep(.el-table__row) {
      height: 20px !important;
      background-color: #022552 !important;

      .cell {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #fefefe;
      }
    }
  }
  .pagination {
    padding-right: 40px;
    padding-top: 18px;
  }
}
</style>
